/* pages/mine/mine.wxss */
/* 容器整体样式 */
.container {
  padding: 5rpx;
  margin-top: 30rpx;

}


// 固定按钮样式
.fixed-btn {
  position: fixed; // 是否固定位置
  bottom: 60rpx;
  right: 30rpx;
  z-index: 1;
  opacity: 1; // 可选透明度
}
// 按钮样式增强
.fixed-btn button {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.253);// 圆形按钮
  font-size: 15px;
  font-weight: normal;
}
/* 
    1. 头像模块样式 
*/
// 
.userbigbox {
  width: 100%;
  margin-top: 100rpx;
  display: flex;
}


.user-info {
  padding: 30rpx;
  border-radius: 10rpx; // 圆角
  display: flex;
  align-items: center; // 文字垂直居中
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  /* 圆形头像 */
  margin-right: 40rpx;
}

.user-name {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  color:#6B4E32;
}


/* 
    2. 订单相关模块样式 
*/

.order-dingdan {
  background-color: white;
  width: 90%;
  padding: 30rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* 横向排列 */
  navigator {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  image {
    width: 60rpx;
    height: 60rpx;
  }

  text {
    font-size: 24rpx;
  }
}


// 订单字体
.dingdan-text {
  font-size: 28rpx;
  color: #333;
}


/*  
    3.服务模块样式 
*/
.service-fuwu {
  box-shadow: 0 10px 10px -4px rgba(0, 0, 0, 0.1);

  margin: -30rpx 20rpx;
  background-color: white;

  padding: 25rpx;
  border-radius:30rpx;
  margin-bottom: 20rpx;
}

// 外包服务模块
.fuwukuang {
  margin-top: 20rpx;
  width: 750rpx;
}

// 服务框排序
.fuwukuang_paixu {
  display: flex;
  image {
    width: 65rpx;
    height: 65rpx;
  }
  button{
    background-color: white !important;
    padding: 0;
    width: 160rpx;
    height: 160rpx;
    font-weight: normal;
  }
}

// 服务模块图标
.fuwutubiao {
  width: 80rpx;
  height: 80rpx;
  padding:10rpx 20rpx;
}

// 服务模块列表样式 
.service-list {
  margin-top: 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

// 服务模块-文字
.service-text {
  font-size: 24rpx;

}

.service-text2 {
  padding-left: 20rpx;
  font-weight: bold;
  font-size: 40rpx;
}

// 分享提示弹窗样式 
.share-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.modal-content {
  width: 80%;
  padding: 40rpx;
  background-color: white;
  border-radius: 16rpx;
  text-align: center;
  line-height: 1.6;
}
.modal-content text {
  font-size: 32rpx;
  color: #333;
}
.close-btn {
  margin-top: 40rpx;
  background-color: #07C160;
  color: white;
  border-radius: 8rpx;
}


// 客服电话模块样式实现
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  width: 80%;
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
}

.modal-header {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
  display: flex;
  justify-content: center;
}

.modal-body {
  padding: 20rpx;
  text-align: center;
}

.modal-footer {
  display: flex;
  border-top: 1rpx solid #eee;
}

title {
  font-size: 32rpx;
  font-weight: bold;
}

.phone {
  font-size: 40rpx;
  margin: 20rpx 0;
}

.cancel-btn, .call-btn {
  flex: 1;
  padding: 20rpx;
  text-align: center;
  font-size: 32rpx;
}

.cancel-btn {
  border-right: 1rpx solid #eee;
  color: #888;
}

.call-btn {
  color: #1aad19;
}


/*
  3/5 . 插播广告模块
*/
// 广告图片
.guanggao_image {
  position: relative; // 相对定位，作为文字的定位参考 
  width: 96%; // 宽度占满父容器 
  // overflow: hidden; // 裁剪超出容器的内容 
}

// 广告图片样式 
.guanggao_image {
  margin: 20rpx;
  image {
    // padding-bottom: 20rpx;
    width: 100%; // 图片宽度自适应
    display: block; // 去除图片底部间隙
  }
}

page {
  background: linear-gradient(to bottom, #fab465, #fcf8f0 60%, #f8f5f3 100%);
  background-attachment: fixed;
  /* 关键！锁定背景不随内容滚动 */
  background-size: 100% 100%;
  /* 覆盖整个页面 */
  min-height: 100vh;
  /* 至少占满一屏 */
}

// 文字容器样式 - 底部左侧定位
.guanggao-text {
  position: absolute; // 绝对定位，相对于父容器
  bottom: 0; // 靠底部对齐
  left: 0; // 靠左侧对齐
  padding: 16rpx 24rpx; // 内边距，rpx单位适配不同屏幕 
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5)); // 底部渐变背景，增强文字可读性
  width: 100%; // 宽度占满
  box-sizing: border-box; // 盒模型计算方式
}

// 左侧主文字样式 
.zuoce_wenzi {
  display: block; // 块级显示，独占一行 
  color: #ff1d1d; // 白色文字 
  font-size: 32rpx; // 字体大小 
  font-weight: bold; // 加粗
  margin-bottom: 10rpx; // 与下方文字的间距 
}

// 左侧详细文字样式
.zuoce_xiangxi {
  display: block; // 块级显示，独占一行
  color: #ffbdbd; // 浅灰色文字
  font-size: 24rpx; // 字体大小，比主文字小
  line-height: 1.4; // 行高，增强多行可读性
}




/*
  4.其他订单模块
*/
.Otherorder-kuang {
  width: 90%;
  margin: 20rpx;
  background-color: white;
  /* 背景 */
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.253);
  padding: 25rpx;
  border-radius: 30rpx;
}

.Otherorder-module {
  padding: 30rpx;
  display: flex; // 让子元素水平排列
  justify-content: space-around; // 均匀分布 
  align-items: center; // 垂直居中
}

.Otherorder-image {
  display: flex;
  flex-direction: column; // 垂直排列（图标在上，文字在下）
  align-items: center; // 子元素水平居中对齐
  margin: 20rpx;

  image {
    width: 60rpx;
    height: 60rpx;
  }

  text {
    margin-top: 25rpx;
    font-size: 24rpx;
  }
}

/*
  5.个人中心模块
*/
.center-kuang {
  width: 90%;
  margin: 20rpx;
  background-color: white;
  /* 背景 */
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.253);
  padding: 20rpx;
  border-radius: 30rpx;
}

.center-module {
  padding: 30rpx;
  display: flex; // 让子元素水平排列
  justify-content: space-around; // 均匀分布 
  align-items: center; // 垂直居中
}

.center-image {
  display: flex;
  flex-direction: column; // 垂直排列（图标在上，文字在下）
  align-items: center; // 子元素水平居中对齐
  margin: 27rpx;
  image {
    width: 60rpx;
    height: 60rpx;
  }
  text {
    margin-top: 25rpx;
    font-size: 24rpx;
  }
}

/*
  6.其他服务模块
*/
.service-kuang {
  background-color: #fffec2;
  /* 背景 */
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.253);
  border-radius: 5%;
  padding-top: 10rpx;
  margin-bottom: 60rpx;
  text {
    font-size: 60rpx;
  }
}

.service-module {
  padding: 30rpx;
  display: flex; // 让子元素水平排列
  justify-content: space-around; // 均匀分布 
  align-items: center; // 垂直居中
}

.service-module_kuang {
  background-color: #4451ff;
}

.service-image {
  display: flex;
  flex-direction: column; // 垂直排列（图标在上，文字在下）
  align-items: center; // 子元素水平居中对齐
  margin: 27rpx;
  image {
    width: 60rpx;
    height: 60rpx;
  }
  text {
    margin-top: 25rpx;
    font-size: 30rpx;
  }
}


/* 登录弹窗样式 */
/* 弹窗容器 */
.auth-popup{
  height: 400rpx;
}
.simple-auth-card {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.simple-auth-header {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}
.simple-login-tip {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 30rpx;
}
.protocol-section {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}
.protocol-checkbox {
  margin-right: 10rpx;
  margin-top: 30rpx;
}
.protocol-text {
  font-size: 24rpx;
}
.button-group {
  display: flex;
  width: 80%;
  margin-bottom: 30rpx;
  margin: 20rpx;
}
.cancel-btn, .login-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
}
.cancel-btn {
  background-color: #f5f5f5;
  color: #333;
  margin-right: 20rpx;
  margin-right: 30rpx !important;
}
.login-btn {
  background-color: #1aad19;
  color: #fff;
}

